<template>
  <div class="help-container">
    <!-- 标题区域 -->
    <div class="help-header">
      <div class="header-left">
        <h1 class="page-title">帮助中心</h1>
        <p class="page-subtitle">查找您需要的帮助和支持资源</p>
      </div>
      <div class="header-right">
        <el-input 
          placeholder="搜索帮助文档..." 
          prefix-icon="el-icon-search" 
          v-model="searchQuery"
          @keyup.enter="searchHelp"
          clearable
          class="search-input"
        />
      </div>
    </div>
    
    <!-- 快速入口卡片 -->
    <div class="quick-access">
      <el-row :gutter="20">
        <el-col :xs="24" :sm="12" :md="8" :lg="6" v-for="(item, index) in quickAccessItems" :key="index">
          <div class="quick-card" :class="item.class" @click="handleQuickAccess(item)">
            <i :class="item.icon"></i>
            <h3>{{ item.title }}</h3>
            <p>{{ item.desc }}</p>
          </div>
        </el-col>
      </el-row>
    </div>
    
    <!-- 帮助中心主体 -->
    <div class="help-main">
      <el-row :gutter="20">
        <!-- 左侧导航 -->
        <el-col :xs="24" :md="6">
          <div class="help-sidebar">
            <h3 class="sidebar-title">帮助分类</h3>
            <el-menu 
              :default-active="activeCategory" 
              class="category-menu"
              @select="handleCategorySelect"
            >
              <el-menu-item v-for="category in helpCategories" :key="category.id" :index="category.id">
                <i :class="category.icon"></i>
                <span>{{ category.name }}</span>
                <span class="article-count">{{ category.count }}</span>
              </el-menu-item>
            </el-menu>
            
            <div class="contact-support">
              <div class="support-header">
                <i class="el-icon-headset"></i>
                <h4>需要更多帮助？</h4>
              </div>
              <p>我们的技术支持团队将为您提供协助</p>
              <el-button type="primary" icon="el-icon-message" class="support-btn">联系支持</el-button>
            </div>
          </div>
        </el-col>
        
        <!-- 右侧内容 -->
        <el-col :xs="24" :md="18">
          <!-- 热门问题 -->
          <div class="help-section">
            <div class="section-header">
              <h2 class="section-title">热门问题</h2>
              <el-button type="text">查看全部</el-button>
            </div>
            
            <el-collapse v-model="activeCollapseItems">
              <el-collapse-item v-for="(faq, index) in popularFaqs" :key="index" :name="index">
                <template #title>
                  <div class="faq-title">
                    <i class="el-icon-question"></i>
                    <span>{{ faq.question }}</span>
                  </div>
                </template>
                <div class="faq-answer" v-html="faq.answer"></div>
              </el-collapse-item>
            </el-collapse>
          </div>
          
          <!-- 最新文档 -->
          <div class="help-section">
            <div class="section-header">
              <h2 class="section-title">最新文档</h2>
              <el-button type="text">查看全部</el-button>
            </div>
            
            <div class="docs-list">
              <div class="doc-card" v-for="(doc, index) in latestDocs" :key="index" @click="viewDocument(doc)">
                <div class="doc-icon" :class="getDocIconClass(doc.type)">
                  <i :class="getDocIcon(doc.type)"></i>
                </div>
                <div class="doc-content">
                  <h3 class="doc-title">{{ doc.title }}</h3>
                  <p class="doc-desc">{{ doc.description }}</p>
                  <div class="doc-meta">
                    <span class="doc-date">{{ doc.date }}</span>
                    <span class="doc-category">{{ doc.category }}</span>
                  </div>
                </div>
                <div class="doc-actions">
                  <el-button type="text" icon="el-icon-view">查看</el-button>
                </div>
              </div>
            </div>
          </div>
          
          <!-- 视频教程 -->
          <div class="help-section">
            <div class="section-header">
              <h2 class="section-title">视频教程</h2>
              <el-button type="text">查看全部</el-button>
            </div>
            
            <el-row :gutter="20" class="video-row">
              <el-col :xs="24" :sm="12" :md="8" v-for="(video, index) in videoTutorials" :key="index">
                <div class="video-card" @click="playVideo(video)">
                  <div class="video-thumbnail">
                    <img :src="video.thumbnail" :alt="video.title">
                    <div class="play-button">
                      <i class="el-icon-video-play"></i>
                    </div>
                    <span class="video-duration">{{ video.duration }}</span>
                  </div>
                  <div class="video-info">
                    <h3 class="video-title">{{ video.title }}</h3>
                    <p class="video-desc">{{ video.description }}</p>
                  </div>
                </div>
              </el-col>
            </el-row>
          </div>
        </el-col>
      </el-row>
    </div>
    
    <!-- 反馈区域 -->
    <div class="feedback-section">
      <div class="feedback-content">
        <h2>这个页面对您有帮助吗？</h2>
        <p>您的反馈将帮助我们改进帮助文档</p>
        <div class="feedback-buttons">
          <el-button plain icon="el-icon-thumb" @click="submitFeedback('helpful')">有帮助</el-button>
          <el-button plain icon="el-icon-thumb" @click="submitFeedback('not-helpful')" style="transform: rotate(180deg)">没帮助</el-button>
        </div>
      </div>
    </div>
    
    <!-- 视频播放对话框 -->
    <el-dialog
      title="视频教程"
      v-model="videoDialogVisible"
      width="800px"
      :before-close="closeVideoDialog"
      center
    >
      <div class="video-player">
        <div class="video-placeholder">
          <i class="el-icon-video-play"></i>
          <span>视频播放区域</span>
        </div>
        <h3 class="mt-3">{{ currentVideo.title }}</h3>
        <p>{{ currentVideo.description }}</p>
      </div>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref, reactive } from 'vue';

// 搜索相关
const searchQuery = ref('');

// 快速入口卡片数据
const quickAccessItems = [
  { 
    title: '新手指南', 
    desc: '快速上手系统的基本功能', 
    icon: 'el-icon-guide', 
    class: 'card-blue',
    type: 'guide'
  },
  { 
    title: '常见问题', 
    desc: '解答使用过程中的常见疑问', 
    icon: 'el-icon-question', 
    class: 'card-green',
    type: 'faq'
  },
  { 
    title: '视频教程', 
    desc: '通过视频学习系统功能', 
    icon: 'el-icon-video-camera', 
    class: 'card-orange',
    type: 'video'
  },
  { 
    title: '联系支持', 
    desc: '获取专业技术支持', 
    icon: 'el-icon-service', 
    class: 'card-purple',
    type: 'support'
  }
];

// 帮助分类
const helpCategories = [
  { id: 'getting-started', name: '入门指南', icon: 'el-icon-guide', count: 8 },
  { id: 'account', name: '账户管理', icon: 'el-icon-user', count: 15 },
  { id: 'dashboard', name: '仪表盘使用', icon: 'el-icon-data-analysis', count: 6 },
  { id: 'user-management', name: '用户管理', icon: 'el-icon-user-solid', count: 12 },
  { id: 'content-management', name: '内容管理', icon: 'el-icon-document', count: 9 },
  { id: 'system-settings', name: '系统设置', icon: 'el-icon-setting', count: 14 },
  { id: 'troubleshooting', name: '故障排除', icon: 'el-icon-first-aid-kit', count: 11 }
];

// 热门问题
const popularFaqs = [
  {
    question: '如何重置我的账户密码？',
    answer: '<p>重置密码的步骤如下：</p><ol><li>点击登录页面的"忘记密码"链接</li><li>输入您的注册邮箱地址</li><li>系统将发送一封包含重置链接的邮件到您的邮箱</li><li>点击邮件中的链接，设置新密码</li><li>使用新密码登录系统</li></ol>'
  },
  {
    question: '如何创建新用户并分配权限？',
    answer: '<p>创建新用户并分配权限的步骤：</p><ol><li>进入"用户管理"模块</li><li>点击"新建用户"按钮</li><li>填写用户信息表单，包括用户名、邮箱等</li><li>在"角色分配"部分，选择合适的用户角色</li><li>设置初始密码或选择"系统自动生成密码并发送"选项</li><li>点击"保存"完成用户创建</li></ol>'
  },
  {
    question: '如何自定义仪表盘视图？',
    answer: '<p>自定义仪表盘视图的方法：</p><ol><li>在仪表盘页面，点击右上角的"自定义"按钮</li><li>使用拖放功能调整卡片位置</li><li>通过"添加组件"按钮选择要显示的图表和信息卡片</li><li>点击每个卡片右上角的设置图标，可以调整数据源和显示参数</li><li>完成后点击"保存布局"按钮</li></ol>'
  },
  {
    question: '系统支持哪些数据导入导出格式？',
    answer: '<p>系统支持以下数据格式的导入导出：</p><ul><li>Excel (.xlsx, .xls) - 适用于大多数数据表</li><li>CSV (.csv) - 适用于简单的表格数据</li><li>JSON (.json) - 适用于结构化数据</li><li>XML (.xml) - 用于特定的数据交换场景</li><li>PDF (.pdf) - 仅支持导出，用于报表生成</li></ul>'
  },
  {
    question: '如何设置自动备份？',
    answer: '<p>设置自动备份的步骤：</p><ol><li>进入"系统设置"模块，选择"备份与恢复"选项</li><li>点击"添加备份计划"按钮</li><li>选择需要备份的数据（所有数据或指定模块）</li><li>设置备份频率（每日、每周或每月）和具体时间</li><li>选择备份存储位置（本地或云存储）</li><li>可选择启用"备份成功通知"选项</li><li>点击"保存"按钮应用设置</li></ol>'
  }
];

// 最新文档
const latestDocs = [
  {
    id: 1,
    title: '新版本功能介绍：V2.5更新详解',
    description: '详细介绍了V2.5版本的新功能、改进和修复的问题。',
    type: 'guide',
    category: '新版本',
    date: '2023-05-15'
  },
  {
    id: 2,
    title: '数据导入导出完全指南',
    description: '如何高效地在系统中导入和导出各种格式的数据。',
    type: 'tutorial',
    category: '数据管理',
    date: '2023-05-10'
  },
  {
    id: 3,
    title: '权限管理最佳实践',
    description: '安全有效地配置和管理系统用户权限的指南。',
    type: 'article',
    category: '安全',
    date: '2023-05-08'
  },
  {
    id: 4,
    title: '自定义报表创建教程',
    description: '如何使用报表生成器创建自定义数据报表。',
    type: 'tutorial',
    category: '报表',
    date: '2023-05-05'
  }
];

// 视频教程
const videoTutorials = [
  {
    id: 101,
    title: '新用户入门视频教程',
    description: '快速了解系统的基本功能和操作流程',
    thumbnail: 'https://via.placeholder.com/320x180',
    duration: '5:24',
    url: '#'
  },
  {
    id: 102,
    title: '高级数据筛选与分析',
    description: '学习如何使用系统的高级数据分析功能',
    thumbnail: 'https://via.placeholder.com/320x180',
    duration: '8:16',
    url: '#'
  },
  {
    id: 103,
    title: '自动化工作流配置',
    description: '如何设置和优化自动化工作流程',
    thumbnail: 'https://via.placeholder.com/320x180',
    duration: '10:42',
    url: '#'
  }
];

// 控制折叠面板
const activeCollapseItems = ref(['0']); // 默认展开第一个

// 当前选中的帮助分类
const activeCategory = ref('getting-started');

// 视频对话框控制
const videoDialogVisible = ref(false);
const currentVideo = ref({});

// 处理快速入口点击
const handleQuickAccess = (item) => {
  console.log('快速入口点击:', item);
  if (item.type === 'video') {
    // 跳转到视频教程区域
    document.querySelector('.video-row').scrollIntoView({ behavior: 'smooth' });
  } else if (item.type === 'faq') {
    // 跳转到常见问题区域
    document.querySelector('.help-section').scrollIntoView({ behavior: 'smooth' });
  } else if (item.type === 'support') {
    // 显示联系支持对话框
    console.log('显示联系支持对话框');
  } else {
    // 其他入口处理
    console.log('其他入口处理:', item.type);
  }
};

// 帮助搜索
const searchHelp = () => {
  console.log('搜索帮助文档:', searchQuery.value);
  // 在实际应用中应调用API搜索帮助内容
};

// 处理分类选择
const handleCategorySelect = (index) => {
  console.log('选择分类:', index);
  activeCategory.value = index;
  // 在实际应用中应根据选择的分类加载相应的帮助内容
};

// 获取文档图标
const getDocIcon = (type) => {
  const iconMap = {
    'guide': 'el-icon-guide',
    'tutorial': 'el-icon-notebook-2',
    'article': 'el-icon-document',
    'faq': 'el-icon-question',
  };
  return iconMap[type] || 'el-icon-document';
};

// 获取文档图标样式类
const getDocIconClass = (type) => {
  const classMap = {
    'guide': 'icon-blue',
    'tutorial': 'icon-green',
    'article': 'icon-purple',
    'faq': 'icon-orange',
  };
  return classMap[type] || 'icon-blue';
};

// 查看文档
const viewDocument = (doc) => {
  console.log('查看文档:', doc);
  // 在实际应用中应打开文档详情页或弹窗
};

// 播放视频
const playVideo = (video) => {
  console.log('播放视频:', video);
  currentVideo.value = video;
  videoDialogVisible.value = true;
};

// 关闭视频对话框
const closeVideoDialog = () => {
  videoDialogVisible.value = false;
};

// 提交反馈
const submitFeedback = (type) => {
  console.log('提交反馈:', type);
  // 在实际应用中应提交反馈到后端
};
</script>

<style scoped>
.help-container {
  padding: 20px;
}

/* 标题区域 */
.help-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 20px;
  flex-wrap: wrap;
}

.page-title {
  font-size: 24px;
  font-weight: 600;
  margin: 0;
  color: var(--dark-color);
}

.page-subtitle {
  color: #666;
  margin: 5px 0 0;
}

.search-input {
  width: 300px;
}

@media (max-width: 768px) {
  .help-header {
    flex-direction: column;
  }
  
  .header-right {
    margin-top: 15px;
    width: 100%;
  }
  
  .search-input {
    width: 100%;
  }
}

/* 快速入口卡片 */
.quick-access {
  margin-bottom: 30px;
}

.quick-card {
  height: 150px;
  border-radius: 8px;
  padding: 20px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  color: white;
  margin-bottom: 20px;
  cursor: pointer;
  transition: transform 0.3s, box-shadow 0.3s;
  box-shadow: var(--card-shadow);
}

.quick-card:hover {
  transform: translateY(-5px);
  box-shadow: var(--hover-shadow);
}

.quick-card i {
  font-size: 36px;
  margin-bottom: 15px;
}

.quick-card h3 {
  margin: 0 0 5px;
  font-size: 18px;
  font-weight: 600;
  color: white;
}

.quick-card p {
  margin: 0;
  font-size: 14px;
  opacity: 0.8;
}

.card-blue {
  background: linear-gradient(135deg, #3E78B2, #4ECDC4);
}

.card-green {
  background: linear-gradient(135deg, #4CAF50, #8BC34A);
}

.card-orange {
  background: linear-gradient(135deg, #FF9A76, #FF5E62);
}

.card-purple {
  background: linear-gradient(135deg, #9C27B0, #673AB7);
}

/* 帮助中心主体 */
.help-main {
  margin-bottom: 30px;
}

/* 左侧导航 */
.help-sidebar {
  background-color: #fff;
  border-radius: 8px;
  padding: 20px;
  box-shadow: var(--card-shadow);
  margin-bottom: 20px;
}

.sidebar-title {
  font-size: 18px;
  font-weight: 600;
  margin: 0 0 15px;
  padding-bottom: 10px;
  border-bottom: 1px solid #eee;
}

.category-menu {
  border-right: none;
}

.article-count {
  float: right;
  background-color: #f5f7fa;
  color: #909399;
  font-size: 12px;
  padding: 2px 8px;
  border-radius: 10px;
}

.contact-support {
  margin-top: 30px;
  padding: 20px;
  background-color: #f8f9fa;
  border-radius: 8px;
  text-align: center;
}

.support-header {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 10px;
}

.support-header i {
  font-size: 24px;
  margin-right: 10px;
  color: var(--primary-color);
}

.support-header h4 {
  margin: 0;
  font-size: 16px;
  font-weight: 600;
}

.support-btn {
  width: 100%;
  margin-top: 10px;
}

/* 右侧内容区 */
.help-section {
  background-color: #fff;
  border-radius: 8px;
  padding: 20px;
  margin-bottom: 20px;
  box-shadow: var(--card-shadow);
}

.section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 15px;
}

.section-title {
  font-size: 18px;
  font-weight: 600;
  margin: 0;
}

.faq-title {
  display: flex;
  align-items: center;
}

.faq-title i {
  margin-right: 10px;
  color: var(--primary-color);
}

.faq-answer {
  padding: 10px 0 0 28px;
  color: #666;
}

/* 文档卡片 */
.docs-list {
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.doc-card {
  display: flex;
  align-items: center;
  padding: 15px;
  background-color: #f8f9fa;
  border-radius: 8px;
  transition: background-color 0.3s;
  cursor: pointer;
}

.doc-card:hover {
  background-color: #f0f2f5;
}

.doc-icon {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 15px;
  flex-shrink: 0;
}

.doc-icon i {
  font-size: 24px;
  color: white;
}

.icon-blue {
  background: linear-gradient(135deg, #3E78B2, #4ECDC4);
}

.icon-green {
  background: linear-gradient(135deg, #4CAF50, #8BC34A);
}

.icon-purple {
  background: linear-gradient(135deg, #9C27B0, #673AB7);
}

.icon-orange {
  background: linear-gradient(135deg, #FF9A76, #FF5E62);
}

.doc-content {
  flex: 1;
}

.doc-title {
  font-size: 16px;
  font-weight: 500;
  margin: 0 0 5px;
}

.doc-desc {
  font-size: 13px;
  color: #666;
  margin: 0 0 5px;
}

.doc-meta {
  font-size: 12px;
  color: #999;
}

.doc-date {
  margin-right: 10px;
}

.doc-category {
  padding: 2px 6px;
  background-color: #f0f2f5;
  border-radius: 4px;
}

.doc-actions {
  margin-left: 10px;
}

/* 视频教程 */
.video-row {
  margin-top: 15px;
}

.video-card {
  margin-bottom: 20px;
  cursor: pointer;
  transition: transform 0.3s;
}

.video-card:hover {
  transform: translateY(-5px);
}

.video-thumbnail {
  position: relative;
  height: 0;
  padding-bottom: 56.25%; /* 16:9 比例 */
  border-radius: 8px;
  overflow: hidden;
  background-color: #1a2634;
}

.video-thumbnail img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.play-button {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background-color: rgba(255, 255, 255, 0.8);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0.8;
  transition: opacity 0.3s;
}

.play-button i {
  font-size: 24px;
  color: #1a2634;
}

.video-card:hover .play-button {
  opacity: 1;
}

.video-duration {
  position: absolute;
  bottom: 10px;
  right: 10px;
  padding: 2px 6px;
  background-color: rgba(0, 0, 0, 0.7);
  color: white;
  border-radius: 4px;
  font-size: 12px;
}

.video-info {
  padding: 10px 0;
}

.video-title {
  font-size: 16px;
  font-weight: 500;
  margin: 0 0 5px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.video-desc {
  font-size: 13px;
  color: #666;
  margin: 0;
  height: 40px;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

/* 反馈区域 */
.feedback-section {
  background-color: #f8f9fa;
  border-radius: 8px;
  padding: 30px;
  text-align: center;
  margin-bottom: 40px;
  box-shadow: var(--card-shadow);
}

.feedback-content h2 {
  font-size: 20px;
  margin: 0 0 10px;
}

.feedback-content p {
  color: #666;
  margin: 0 0 20px;
}

.feedback-buttons {
  display: flex;
  justify-content: center;
  gap: 10px;
}

/* 视频对话框 */
.video-player {
  width: 100%;
}

.video-placeholder {
  width: 100%;
  height: 400px;
  background-color: #1a2634;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: white;
  border-radius: 8px;
}

.video-placeholder i {
  font-size: 48px;
  margin-bottom: 10px;
}
</style> 